<template>
	<view class="flex-col page">
		<view class="flex-col">
			<view class="flex-row items-center justify-around relative section_3">
				<view class="flex-col justify-center relative items-center" style="height: 80rpx;"
					@click="toType(index)" v-for="(item,index) in data.topList" :key="index">
					<text :class="data.topIndex==index?'font_3':'font_4'">{{item}}</text>
					<!-- {{data.topIndex}} -->
					<view class="section_4 pos_4" v-if="data.topIndex==index"></view>
				</view>
			</view>
			<view class="flex-col list space-y-20">
				<view class="flex-col list-item space-y-39" @click.stop="toDetail(item.order_id,index)" v-for="(item, index) in list" :key="index">
					<view class="flex-row justify-between items-center">
						<text class="font_3 text_10">{{item.shop_name}}</text>
						<text class="font_5">{{item.status_name}}</text>
					</view>
					
					<view class="flex-col space-y-36">
						<view class="flex-row justify-between" v-for="(item1,index1) in item.goods_list" :key="index1">
							<view class="flex-row items-center space-x-18">
								<image class="image_6" :src="item1.cover_path" />
								<view class="flex-col items-start space-y-67">
									<text class="font_6 text_11">{{item1.service_name}}</text>
									<view class="group">
										<text class="font_9">￥</text>
										<text class="font_7">{{item1.price}}</text>
									</view>
								</view>
							</view>
							<text class="self-start font_8 text_12">数量：×{{item1.quantity}}</text>
						</view>
						<view class="flex-row justify-between items-center">
							<view class="group_2">
								<text class="font_10 text_13">合计:</text>
								<text class="font_2">￥{{item.pay_amounts}}</text>
							</view>
							<view class="flex-row space-x-20">
								<view class="flex-col justify-start items-center text-wrapper_7"
									@click.stop="data.show=true,data.cauId=item.order_id,data.selectIndex=index"
									v-if="item.status==1||item.status==2">
									<text class="font_11">取消订单</text>
								</view>
								<view class="flex-col justify-start items-center text-wrapper_8" v-if="item.status==1"
									@click.stop="toPay(index)">
									<text class="font_12">去付款</text>
								</view>
								<view class="flex-col justify-start items-center text-wrapper_8" v-if="item.status==3"
									@click.stop="toVoucher(item.order_id,index)">
									<text class="font_12">使用</text>
								</view>
								<!-- <view class="flex-col justify-start items-center text-wrapper_8" v-if="item.status==4&&item.is_comm==0"
									@click.stop="toEvaluate(item.order_id,item.shop_id,index)">
									<text class="font_12">评价</text>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="data.show" :round="10" :closeable="true" mode="bottom" @close="data.show=false">
			<div class="title">请选择取消订单的理由</div>
			<view class="popup">
				<view class="popup-item" @click="data.cause=index" v-for="(item,index) in data.whyList" :key="index">
					<view class="popup-item-num">{{item}}</view>
					<view class="popup-item-click">
						<image src="/static/click_ac.png" v-if="data.cause==index" mode=""></image>
						<image src="/static/click.png" v-else mode=""></image>
					</view>
				</view>
			</view>
			<view class="btn" @click="toCause">确定</view>
		</u-popup>
		<u-popup :show="data.show1" :round="10" bgColor="transparent" mode="center" @close="data.show1=false">
			<view class="popupV flex-col justify-center items-center">
				<image src="/static/bg5.png" mode=""></image>
				<view class="popupVoucher flex-col items-center justify-center">
					<text>取货凭证</text>
					<text>将二维码展示给店员</text>
					<image src="/static/line.png" class="line" mode=""></image>
					<view class="Infor flex-col">
						<text>核销信息</text>
						<view class="InforItem flex-row justify-between items-center"
							v-for="(item,index) in data.selectList" :key="index">
							<view class="Infor1 flex-row items-center">
								<view class="line1"></view>
								<text :class="item.status==0?'active':''">{{item.use_sn}}</text>
								<image src="/static/Kopie.png" v-if="item.status==0" mode="" @click.stop="toCopy(item.use_sn)"></image>
							</view>
							<text class="active" v-if="item.status==0">待使用</text>
							<text v-else>已使用</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onBeforeUnmount,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let p = ref(1)
	let list = ref([])
	let data = ref({
		whyList: ['123', '23', '12345'],
		cause: 0,
		topList: ['全部', '待付款', '待接单', '待使用', '已完成', '已关闭'],
		topIndex: 0,
		cauId: '',
		selectIndex: 0,
		selectList: [{
				"use_sn": "16983 068 7152 8251",
				"status": "0"
			},
			{
				"use_sn": "16983 068 7152 8252",
				"status": "0"
			},
			{
				"use_sn": "16983 068 7152 8253",
				"status": "0"
			}
		],
		show: false,
		show1: false,
	})
	// let interval
	// onBeforeUnmount(() => {
	// 	clearInterval(interval);
	// })
	onPullDownRefresh(() => {
		list.value.length = 0
		p.value = 1
		getDate()
		uni.stopPullDownRefresh()
	})
	onLoad((option) => {
		// list.value.length=0
		// console.log(data.value.topIndex, option.type);
		getDate()
		uni.$on('detail', function(data) {
			console.log(data);
			if (data.type == "删除") {
				list.value.splice(data.index, 1)
			} else if (data.type == "取消") {
				getDetai(data.index)
			}

		})
	})
	onReachBottom(() => {
		p.value++
		getDate()
	})

	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.orderList, {
			member_id: uni.getStorageSync('member_id') | '',
			status: data.value.topIndex != 5 ? data.value.topIndex : 11,
			p: p.value,
		}).then(res => {
			if (res.flag == "success") {
				// if(res.data.list.length>0){
				list.value = [...list.value, ...res.data.list]
				// }
			} else {
				uni.showToast({
					title: res.message,
					icon: "none"
				})
			}
			console.log(list.value);
		})
		proxy.$req.requestGET(proxy.$api.SystemInfo.cancelReason).then(res => {
			if (res.flag == "success") {
				data.value.whyList = res.data.reasons
			}
		})
	}
	const getDetail = (index) => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.orderDetail, {
			order_id: list.value[index].order_id,
			member_id: uni.getStorageSync('member_id') || '',
			lng: uni.getStorageSync('longitude'),
			lat: uni.getStorageSync('latitude'),
		}).then(res => {
			console.log(res)
			if (data.value.topIndex == 0) {
				list.value[index] = res.data
			} else {
				list.value.splice(index, 1)
			}
		})
	}
	const getDetai = (index) => {
		proxy.$req.requestPOST1(proxy.$api.OrderInfoInfo.orderDetail, {
			order_id: list.value[index].order_id,
			member_id: uni.getStorageSync('member_id') || '',
			lng: uni.getStorageSync('longitude'),
			lat: uni.getStorageSync('latitude'),
		}).then(res => {
			console.log(res)
			if (data.value.topIndex == 0) {
				list.value[index] = res.data
			} else {
				list.value.splice(index, 1)
			}
		})
	}
	const toPay = (index) => {
		console.log(index);
		let obj = {
			order_id: list.value[index].order_id,
			order_sn:list.value[index].order_sn,
			pay_amounts:list.value[index].pay_amounts
		}
		setTimeout(() => {
			uni.redirectTo({
				url: '/pages/payment/payment?parm=' + JSON.stringify(obj)
			})
		}, 1000)
		
	}
	const toCopy=(use_sn)=>{
		uni.setClipboardData({
			data: use_sn,
			success: function (res) {
				console.log(res);
				data.value.show1=false
				uni.showToast({
					title: '已复制到剪切板',
					icon: 'none'
				})
			},
			fail(err){
				console.log(err);
			}
		});
	}
	const toType = (num) => {
		// console.log(data.value.topIndex,num);
		data.value.topIndex = num
		list.value.length = 0
		p.value = 1
		getDate()

	}
	const toChat = (friend_id) => {
		uni.navigateTo({
			url: '/pages/chat/chat?id=' + friend_id
		})
	}
	const toOrder = (index) => {
		// console.log(list.value[index].game_list[0]);
		proxy.$req.requestPOST(proxy.$api.PwGameInfo.confirmOrder, {
			pw_id: list.value[index].game_list[0].pw_id,
			game_id: list.value[index].game_list[0].game_id,
			hour: 1
		}).then(res => {
			console.log(res);
			if (res.flag == "success") {
				uni.navigateTo({
					url: '/pages/order/order?data=' + JSON.stringify(res.data)
				})
			} else {
				uni.showToast({
					title: res.message,
					icon: "none"
				})
			}
		})
	}
	const toEvaluate = (order_id, shop_id, index) => {
		uni.navigateTo({
			url: '/pages/evaluate/evaluate?order_id=' + order_id + '&shop_id=' + shop_id + '&index=' + index
		})
	}
	const toAfter = (order_id, index) => {
		uni.navigateTo({
			url: '/pages/drawback/drawback?order_id=' + order_id + '&index=' + index
		})
	}
	const toDetail = (order_id, index) => {
		uni.navigateTo({
			url: '/pages/orderDetail/orderDetail?order_id=' + order_id + '&index=' + index
		})
	}

	const toRefund = (order_id, index) => {
		uni.navigateTo({
			url: '/pages/afterSales/afterSales?order_id=' + order_id + '&index=' + index
		})
	}
	const toCause = () => {
		data.value.show = false
		uni.showModal({
			title: '提示',
			content: '确定要取消订单吗？',
			success: function(res) {
				if (res.confirm) {
					proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.cancelOrder, {
						member_id: uni.getStorageSync('member_id') | '',
						reason: data.value.whyList[data.value.cause],
						order_id: list.value[data.value.selectIndex].order_id
					}).then(res => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						if (res.flag == "success") {
							setTimeout(() => {
								getDetail(data.value.selectIndex)
							}, 1000)
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
	const toSign = (order_id, index) => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.finishOrder, {
			order_id: order_id
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.flag == "success") {
				if (res.data.paysign) {
					let parm = res.data
					wx.requestPayment({
						timeStamp: parm.timestamp,
						nonceStr: parm.noncestr,
						package: parm.package,
						signType: parm.signtype,
						paySign: parm.paysign,
						success(res2) {
							console.log(res2);
							uni.showToast({
								title: "支付成功",
								icon: 'success'
							})
							setTimeout(() => {
								getDetail(index)
							}, 1000)
						},
						fail(res2) {
							console.log(res2);
							uni.showToast({
								title: "支付失败",
								icon: 'error'
							})
							setTimeout(() => {
								getDetai(index)
							}, 1000)
						}
					})
				} else {
					setTimeout(() => {
						getDetail(index)
					}, 1000)
				}

			}
		}).catch(err => {
			console.log(err);
		})

	}
	const toVoucher = (order_id, index) => {
		proxy.$req.requestPOST(proxy.$api.OrderInfoInfo.useList, {
			member_id: uni.getStorageSync('member_id') | '',
			order_id: order_id
		}).then(res => {
			if (res.flag == "success") {
				data.value.selectList = res.data.list
				data.value.cauId = order_id
				data.value.show1 = true
			} else {
				uni.showToast({
					title: res.message,
					icon: 'error'
				})
			}
		})

	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		// overflow-y: auto;
		overflow-x: hidden;
		min-height: 100vh;

		.section {
			padding: 34rpx 28rpx 29rpx 63rpx;
			background-color: #ffffff00;

			.font_1 {
				font-size: 28rpx;
				font-family: PingFangSC;
				letter-spacing: 1.4rpx;
				color: #ffffff;
			}

			.text {
				line-height: 21rpx;
			}

			.text_2 {
				line-height: 15rpx;
			}

			.pos {
				position: absolute;
				left: 20rpx;
				bottom: 3rpx;
			}

			.space-x-8 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 8rpx;
				}

				.image {
					width: 36rpx;
					height: 24rpx;
				}

				.image_2 {
					width: 32rpx;
					height: 22rpx;
				}

				.image_3 {
					width: 50rpx;
					height: 24rpx;
				}
			}
		}

		.section_2 {
			padding: 27rpx 12rpx;
			background-color: #ffffff00;

			.image-wrapper {
				width: 73rpx;

				.image_4 {
					width: 24rpx;
					height: 24rpx;
				}

				.image_5 {
					width: 34rpx;
					height: 6rpx;
				}
			}

			.pos_2 {
				position: absolute;
				left: 12rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.text_3 {
				color: #333333;
				font-size: 36rpx;
				line-height: 34rpx;
			}

			.pos_3 {
				position: absolute;
				right: 19rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.section_3 {
			padding: 0rpx 18rpx;
			background-color: #ffffff;

			.text-wrapper {
				flex: 1 1 86rpx;

				.text_4 {
					line-height: 29rpx;
				}
			}

			.text-wrapper_2 {
				margin-left: 29rpx;
				flex: 1 1 86rpx;

				.text_5 {
					line-height: 27rpx;
				}
			}

			.text-wrapper_3 {
				margin-left: 41rpx;
				flex: 1 1 86rpx;

				.text_6 {
					line-height: 27rpx;
				}
			}

			.font_4 {
				font-size: 28rpx;
				font-family: PingFangHeiTC;
				line-height: 28rpx;
				color: #999999;
			}

			.text-wrapper_4 {
				margin-left: 41rpx;
				flex: 1 1 86rpx;

				.text_7 {
					line-height: 27rpx;
				}
			}

			.text-wrapper_5 {
				margin-left: 39rpx;
				flex: 1 1 86rpx;

				.text_8 {
					line-height: 27rpx;
				}
			}

			.text-wrapper_6 {
				margin-left: 40rpx;
				margin-right: 8rpx;
				flex: 1 1 86rpx;

				.text_9 {
					line-height: 27rpx;
				}
			}

			.section_4 {
				background-color: #54bc6e;
				border-radius: 4rpx;
				width: 30rpx;
				height: 8rpx;
			}

			.pos_4 {
				position: absolute;
				// left: 44rpx;
				// top: 82rpx;
				bottom: 0;
			}
		}

		.list {
			padding: 20rpx 30rpx 0;

			.list-item {
				padding: 36rpx 28rpx 30rpx;
				background-color: #ffffff;
				border-radius: 20rpx;

				.text_10 {
					line-height: 29rpx;
				}

				.font_5 {
					font-size: 26rpx;
					font-family: PingFangHeiTC;
					line-height: 25rpx;
					color: #54bc6e;
				}

				.space-y-36 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 36rpx;
					}

					.space-x-18 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 18rpx;
						}

						.image_6 {
							border-radius: 20rpx;
							width: 160rpx;
							height: 160rpx;
						}

						.space-y-67 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-top: 67rpx;
							}

							.font_6 {
								font-size: 32rpx;
								font-family: PingFangSC;
								line-height: 31rpx;
								color: #333333;
							}

							.text_11 {
								margin-left: 6rpx;
							}

							.group {
								line-height: 25rpx;

								.font_9 {
									font-size: 24rpx;
									font-family: PingFangSC;
									line-height: 19rpx;
									color: #ff3333;
								}

								.font_7 {
									font-size: 32rpx;
									font-family: PingFangSC;
									line-height: 25rpx;
									color: #ff3333;
								}
							}
						}
					}

					.font_8 {
						font-size: 24rpx;
						font-family: PingFang SC;
						line-height: 23rpx;
						color: #999999;
					}

					.text_12 {
						margin-top: 117rpx;
					}

					.group_2 {
						line-height: 28rpx;
						height: 31rpx;

						.font_10 {
							font-size: 28rpx;
							font-family: PingFangSC;
							line-height: 28rpx;
							color: #666666;
						}

						.text_13 {
							font-size: 29rpx;
							line-height: 27rpx;
						}
					}

					.space-x-20 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 20rpx;
						}

						.text-wrapper_7 {
							padding: 16rpx 0;
							background-color: #ffffff;
							border-radius: 16rpx;
							width: 160rpx;
							height: 62rpx;
							border: solid 2rpx #eaeaea;

							.font_11 {
								font-size: 26rpx;
								font-family: PingFangSC;
								line-height: 25rpx;
								color: #666666;
							}
						}

						.text-wrapper_8 {
							padding: 18rpx 0;
							background-color: #54bc6e;
							background-image: linear-gradient(0deg, #00a796 0%, #54bc6e 100%);
							border-radius: 16rpx;
							width: 160rpx;
							height: 62rpx;

							.font_12 {
								font-size: 26rpx;
								font-family: PingFangSC;
								line-height: 25rpx;
								color: #ffffff;
							}
						}
					}
				}
			}

			.space-y-39 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 39rpx;
				}
			}
		}

		.space-y-20 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 20rpx;
			}
		}

		.font_3 {
			font-size: 30rpx;
			font-family: PingFangSC;
			line-height: 30rpx;
			color: #333333;
		}

		.font_2 {
			font-size: 37rpx;
			font-family: PingFangSC;
			line-height: 28rpx;
			color: #ff3333;
		}

		.equal-division {
			margin-top: 60rpx;

			.section_6 {
				flex: 1 1 250rpx;

				.image_7 {
					width: 32rpx;
					height: 32rpx;
				}

				.font_14 {
					font-size: 24rpx;
					font-family: PingFangHeiTC;
					line-height: 23rpx;
					color: #54bc6e;
				}

				.text_22 {
					color: #4ec200;
				}
			}

			.equal-division-item {
				padding: 20rpx 0 12rpx;
				background-color: #ffffff;
				height: 100rpx;
			}

			.space-y-15 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 15rpx;
				}
			}
		}

		.section_5 {
			background-color: #ffffff;
			border-top: solid 2rpx #f6f6f6;
		}

		.title {
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-top: 19rpx;
		}

		.popup {
			width: 750rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			margin: 10rpx 0;
		}

		.popup-item {
			width: 90%;
			height: 105rpx;
			border-bottom: 2rpx solid #F6F6F6;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.popup-item:nth-last-child(1) {
			border-bottom: 0;
		}

		.popup-item-num {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.popup-item-click {
			width: 32rpx;
			height: 32rpx;
			/* border: 2rpx solid #B5B5B5; */
			border-radius: 17rpx;

			>image {
				width: 33rpx;
				height: 33rpx;
			}
		}

		.active {
			border: 0;
		}

		.btn {
			width: 630rpx;
			height: 104rpx;
			background-color: #54BC6E;
			border-radius: 24rpx;
			margin: 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.popupV {
			width: 620rpx;
			height: 730rpx;
			position: relative;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.popupVoucher {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			>text {
				&:nth-child(1) {
					margin-top: 50rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				&:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 20rpx;
					margin-bottom: 33rpx;
				}
			}

			>image {

				&:nth-child(3) {
					width: 90%;
					height: 2rpx;
					margin-bottom: 33rpx;
				}
			}

			.Infor {
				margin-top: 20rpx;
				width: 80%;
				min-height: 410rpx;
				margin-bottom: 53rpx;

				>text {
					font-size: 32rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #333333;
					line-height: 32rpx;
					margin-bottom: 35rpx;
				}

				.InforItem {
					margin-bottom: 28rpx;
					text {
						font-size: 28rpx;
						font-family: PingFangSC;
						font-weight: 400;
						color: #666666;
					}

					.active {
						color: #333333;
					}

					.Infor1 {
						.line1 {
							width: 6rpx;
							height: 6rpx;
							background: #111;
							border-radius: 50%;
							margin-right: 18rpx;
						}

						>image {
							width: 24rpx;
							height: 24rpx;
							margin-left: 14rpx;
						}
					}
				}
			}
		}
	}
</style>